<template>
    <div>
        <div class="header">
      <span>
        <label for="label_1">姓名: </label>
        <el-input
            v-model="search_name"
            placeholder="请输入内容"
            style="width: 200px"
            clearable
            id="label_1"
        ></el-input>
      </span>
            <span style="margin-left: 15px">
        <label for="label_2">联系方式: </label>
        <el-input
            v-model="search_phone"
            placeholder="请输入内容"
            style="width: 200px; height: 40px"
            clearable
            id="label_2"
        ></el-input>
      </span>
            <span style="margin-left: 15px">
        <label for="label_3">访问时间: </label>
        <el-select v-model="search_visittime" placeholder="请选择" id="label_3">
          <el-option
              v-for="item in visittime_options"
              :key="item.value"
              :value="item.value"
              :label="item.label"
          >
          </el-option>
        </el-select>
      </span>
            <span>
                <el-button type="primary" @click="handelSearch" icon="el-icon-search">查询</el-button>
            </span>
        </div>
        <div class="content">
            <el-table
                :data="tableData"
                stripe
                style="width: 100%"
                :row-style="{ height: '32px' }"
                :header-row-style="{ height: '10px' }"
                :cell-style="{ padding: '1px' }"
            >
                <el-table-column prop="name" label="姓名" width="150"></el-table-column>
                <el-table-column prop="age" label="年龄" width="150"></el-table-column>
                <el-table-column prop="come" label="客户来源"></el-table-column>
                <el-table-column prop="phone" label="联系方式" width="150"></el-table-column>
                <el-table-column prop="come_at" label="预计到院时间" width="150"
                                 :formatter="handleDateFormatter"></el-table-column>
                <el-table-column prop="next_visit_at" label="下次访问时间"
                                 width="250">
                    <template slot-scope="scope">
                        <span :style="{'color': handleIsRed(scope.row.next_visit_at)}">
                            {{ scope.row.next_visit_at | dateFormatter }}
                         </span>
                    </template>
                </el-table-column>
                <el-table-column label="操作" width="150">
                    <template slot-scope="scope">
                        <i
                            class="el-icon-phone-outline"
                            @click="handleEdit(scope.$index, scope.row)"
                        ></i>
                        &nbsp;&nbsp;&nbsp;
                        <i
                            class="el-icon-folder"
                            @click="handleShowAll(scope.$index, scope.row)"
                        ></i>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div class="footer">
            <div class="block">
                <el-pagination
                    @current-change="handleCurrentChange"
                    layout="total, prev, pager, next"
                    background
                    :total="total"
                >
                </el-pagination>
            </div>
        </div>
        <!-- 存放编辑组件 -->
        <div v-show="showEdit">
            <CallPhone ref="callphone"></CallPhone>
        </div>
        <div v-show="showAll">
            <ShowAll ref="showall"></ShowAll>
        </div>
    </div>
</template>

<script>
    import CallPhone from "./CallPhone";
    import ShowAll from "./ShowAll";
    import {dateFormat} from "@/utils/time.js";

    const starttime = parseInt(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000); //获取当天零点的时间
    const endtime = parseInt(new Date(new Date().setHours(0, 0, 0, 0) + 24 * 60 * 60 * 1000 - 1).getTime() / 1000); //获取当天23:59:59的时间

    export default {
        name: "UserList",
        data() {
            return {
                search_name: "",
                search_phone: "",
                search_visittime: 1,
                tableData: [],
                currentPage: 1, // 默认 1
                total: 0,
                showAll: false,
                showEdit: false,
                visittime_options: [{"value": 1, "label": "今天"}, {"value": 2, "label": "明天"}, {
                    "value": 3,
                    "label": "全部"
                }],
                next_visit_at: 0

            };
        },
        methods: {
            handleEdit(index, row) {
                this.showEdit = true;
                this.$refs.callphone.handleOpen(row);
            },
            handleShowAll(index, row) {
                this.showAll = true;
                this.$refs.showall.handleOpen(row);
            },
            // 格式化时间
            handleDateFormatter(row, column) {
                // console.log("col: ", column)
                if (column.property === 'next_visit_at') {
                    return dateFormat(row.next_visit_at);
                }
                if (column.property === 'come_at') {
                    return dateFormat(row.come_at);
                }
            },
            // 时间小于当天 0 点则为红色
            handleIsRed(timestamp){
                let curTime0 = parseInt(new Date(new Date().setHours(0, 0, 0, 0)).getTime() / 1000); //获取当天零点的时间
                return timestamp < curTime0 ? 'red' : '';
            },
            // 查询
            handelSearch() {
                let search_starttime = starttime;
                let search_endtime = endtime;
                if (this.search_visittime === 2) {
                    search_starttime += 24 * 3600;
                    search_endtime += 24 * 3600;
                }
                if (this.search_visittime === 3) {
                    search_starttime = "";
                    search_endtime = "";
                }

                let searchCondition = {
                    search_name: this.search_name,
                    search_phone: this.search_phone,
                    search_starttime: search_starttime,
                    search_endtime: search_endtime,
                };
                // console.log(searchCondition);
                this.handleInitVisitListData(1, searchCondition);
            },
            // 分页
            handleCurrentChange(curPage) {
                this.handleInitVisitListData(curPage);
            },
            // 加载数据
            handleInitVisitListData(curPage = 1, params = {}) {
                // console.log(curPage);
                params['uid'] = this.COOKIE.get('uid');
                if (this.search_visittime === 1) {  // 默认今天
                    params['search_starttime'] = starttime;
                    params['search_endtime'] = endtime;
                }
                // console.log(params)
                this.AXIOS.get(`/api/visit/list?cur_page=${curPage}`, {params: params})
                    .then((res) => {
                        // console.log(res.data)
                        this.tableData = res.data.data;
                        this.total = res.data.total;
                    })
                    .catch((err) => {
                        console.error(err);
                        this.$message({"type": "error", "message": err})
                    });
            },
        },
        filters: {
            dateFormatter(timestamp) {
                return dateFormat(timestamp);
            },
        },
        components: {
            CallPhone,
            ShowAll
        },
        // 加载页面数据
        mounted() {
            this.handleInitVisitListData();
        },
    };
</script>

<style scoped>
    .header {
        text-align: left;
        /* font-weight: bold; */
    }

    .content {
        margin-top: 40px;
    }

    .footer {
        position: fixed;
        bottom: 15px;
        left: 200px;
    }
</style>
